<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
			header{
				width: 980;height: 50px;
				
			  font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}
			.art
			{font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}
		</style>
	</head>
	<body>
		<center>
		<header><h1>三步走</h1></header>
		<p>教程来源<a href="https://hanteng.gitee.io/minimal-mistakes/">廖老师五步走</a></p>
		<div class="art">
			<ul>
			<li><p>从<a href="https://fontawesome.com/icons"> Font Awesome</a>提取svg</p><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="battery-empty" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-battery-empty fa-w-20 fa-5x"><path fill="currentColor" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z" class=""></path></svg></li>
		<li><p>弹性图片设置
			</p>
<div style="width:15%">
	<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="battery-empty" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-battery-empty fa-w-20 fa-5x">
		<path fill="currentColor" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z" class=""></path></svg>
</div>
<pre class="highlight">
	<code>
	
     
</code></pre>
<li>
	<p>改变颜色</br>	
		
	<div style="width:15%">
	<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="battery-empty" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-battery-empty fa-w-20 fa-5x"><path fill="red" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z" class=""></path></svg>

</div>
</li>
		
		</ul>
		</div>


</center>
	</body>
</html>
